<template>
  <VScaleScreen
    :fullScreen="false"
    width="1920"
    height="1080"
    :delay="400"
    :boxStyle="boxStyle"
  >
    <BorderBox11 title="大屏标题">
      <div style="padding: 80px 40px 40px 40px">
        <el-row>
          <el-button>Default</el-button>
          <el-button type="primary">Primary</el-button>
          <el-button type="success">Success</el-button>
          <el-button type="info">Info</el-button>
          <el-button type="warning">Warning</el-button>
          <el-button type="danger">Danger</el-button>
        </el-row>
        <el-row>
          <ElDatePicker
            v-model="value1"
            :append-to="appendToDom"
          ></ElDatePicker>
          <ElSelect
            style="width: 300px"
            v-model="value"
            :append-to="appendToDom"
          >
            <ElOption
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </el-row>
        <decoration-1
          :color="['pink', 'yellow']"
          style="width: 200px; height: 50px"
        />
        <decoration-2 :reverse="true" style="width: 5px; height: 150px" />
        <div style="width: 800px; height: 400px">
          <EChartsComponent :option="chartOption" />
          <ElButton type="success" @click="handleUpdata">更新数据</ElButton>
        </div>
      </div>
    </BorderBox11>
  </VScaleScreen>
</template>
<script setup>
import { ref, nextTick } from "vue";
import {
  ElButton,
  ElDatePicker,
  ElSelect,
  ElOption,
  ElRow,
} from "element-plus";
import VScaleScreen from "v-scale-screen";
import { Decoration1, Decoration2, BorderBox11 } from "@kjgl77/datav-vue3";
import EChartsComponent from "@/components/EChartsComponent/index.vue";

const appendToDom = ref();
nextTick(() => {
  appendToDom.value = document.querySelector(".screen-wrapper");
});

const boxStyle = {
  background: "linear-gradient(to top ,#00257d, #042f55)",
};
const value1 = ref();
const value = ref();
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
];
const chartOption = ref({
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {},
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
    },
  ],
});
const handleUpdata = () => {
  // 随机
  chartOption.value.series[0].data = [
    Math.random() * 1000,
    Math.random() * 1000,
    Math.random() * 1000,
    Math.random() * 1000,
    Math.random() * 1000,
    Math.random() * 1000,
    Math.random() * 1000,
  ];
};
</script>
<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}
</style>
